<template>
    <div class="pro-type">
        <div class="pro-type-title">
          <div class="pro-type-title-text">承接项目类型</div>
          <div class="pro-type-title-describe">业务覆盖网络基础设施、网络安全、服务器、主机存储、云桌面、整体解决方案</div>
        </div>
        <div class="pro-type-items">
          <div class="pro-type-item" v-for="(item, key) in proItemList" :key=key>
            <div class="icon-container">
              <img :src="item.img">
            </div>
            <span>{{item.name}}</span>
          </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'proType',
  data() {
    return{
        
    }
  },
  props: {
    proItemList: {
      type: Array,
      required: true
    }
  },
  components: {
  
  },
  mounted: function () {
    //console.log(this.proItemList)
  },
  methods: {
    
  }
}
</script>

<style lang="stylus" scoped>
.pro-type{
  height:490px;
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
  margin-bottom: 20px;  
}
.pro-type-title{
  height: 58px;
  line-height: 58px;
  padding-left: 30px;
  border-bottom: 1px solid rgba(238,238,238,1);
  >div{
    display: inline-block;
  }
  .pro-type-title-text{
    font-size:16px;
    color:rgba(30,30,30,1);
    margin-right: 30px;
  }
  .pro-type-title-describe{
    font-size:12px;
    color:rgba(130,130,130,1);
  }
}
.pro-type-items{
  padding: 60px;
  padding-top: 0;  
}
.pro-type-item{
  width:146px;
  height:146px;
  background:rgba(255,255,255,1);
  margin-top: 40px;
  display: inline-block;
  text-align: center;
  padding: 38px 0;
  box-sizing: border-box;
  .icon-container{
    margin-bottom: 16px;
    img{
      width: 36px;
      height: 36px;
    }
  }
  >span{
    color:rgba(30,30,30,1);
    font-size:14px;
    line-height: 14px;
  }
}
.pro-type-item:nth-child(3n+2){
  margin-left: 198px;
  margin-right: 198px;
}
</style>
